<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增园所信息')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-area-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">园所名称：</label>
                <div class="col-sm-8">
                    <input name="areaName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">主管理用户ID：</label>
                <div class="col-sm-8">
                    <input name="adminStaff" class="form-control" type="text" >
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">上级机构(管理机构)：</label>
                <div class="col-sm-8">
                    <select id="groupId" name="groupId" class="form-control m-b" >
                        <option  th:each="group : ${groupList}"  th:value="${group.id}"  th:text="${group.groupName}">上级集团</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">上传：</label>
                <div class="col-sm-8">
                    <input type="file" name="upload" id="upload" style="display: none;" />
                    <input type="hidden"  id="fileType" style="display: none;" />
                    <a class="btn btn-success" onclick="onFile(1)" >
                        <i class="fa fa-plus"></i> 园区logo
                    </a>
                    <a class="btn btn-success" onclick="onFile(2)" >
                        <i class="fa fa-plus"></i> 园区主图
                    </a>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">园区logo：</label>
                <div class="col-sm-8">
                    <input  id="logo" name="logo" class="form-control" type="text"  readonly="true">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">所属区域：</label>
                <div class="col-sm-8">
                    <input name="location" class="form-control" type="text">
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">联系方式：</label>
                <div class="col-sm-8">
                    <input name="mobile" class="form-control" type="text">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">地址码：</label>
                <div class="col-sm-8">
                    <input name="pcaCodeDesc"  id="pcaCodeDesc" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">详细地址：</label>
                <div class="col-sm-8">
                    <input name="address" id="address" class="form-control" type="text">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">经度：</label>
                <div class="col-sm-8">
                    <input name="longtitude"  id="longtitude" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">纬度：</label>
                <div class="col-sm-8">
                    <input name="latitude"   id="latitude" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-8">
                    <input id="tipinput"  class="form-control" type="text"  placeholder="输入地点将自动匹配">
                </div>
            </div>

            <div class="row">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
                    </button>&nbsp;
                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
                    </button>
                </div>
            </div>
            <input id="addressList" name="addressList" class="form-control" type="text" style="display: none" >
            <div class="form-group">
                <div class="col-sm-1">

                </div>
                <div class="col-sm-10" id="amapDiv">
                    <div id="container" tabindex="0" style="width: 100%;  height: 600px;"></div>
                </div>
                <div class="col-sm-1" >
                    <div style="width:100%;">
                        <div class="amap-info-list" id="amap-list" >
                            <div class="col-sm-12" style="display: flex;align-items: center">
                                <div class="radio-box consumeType"
                                     th:each="dict,dictStat : ${@dict.getType('zz_crowd_jnp_filter_type')}"
                                     th:id="${'filterType_' + dictStat.index}">
                                    <label th:for="${'filterType_' + dict.dictCode}">
                                        <input type="radio" th:index="${dictStat.index}" name="filterType"
                                               th:value="${dict.dictValue}" th:text="${dict.dictLabel}"
                                               th:checked="${dict.dictValue} eq '0'" required>
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-12 title1">范围</div>
                            <div class="col-sm-12" style="display: flex;align-items: center">
                                <div class="radio-box locationType"
                                     th:each="dict,dictStat : ${@dict.getType('zz_crowd_jnp_location_type')}"
                                     th:id="${'locationType_' + dictStat.index}">
                                    <label th:for="${'consumeType_' + dict.dictCode}">
                                        <input type="radio" th:index="${dictStat.index}" name="locationType"
                                               th:value="${dict.dictValue}" th:text="${dict.dictLabel}"
                                               th:checked="${dict.dictValue} eq '0'" required>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

    </div>
    <!--引用高德地图-->
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=02e8f4a4e7636bc5027f1bca39a414eb"></script>
    <script src="http://webapi.amap.com/maps?v...;key=02e8f4a4e7636bc5027f1bca39a414eb&plugin=AMap.Geocoder"></script>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "sso/area"
        $("#form-area-add").validate({
            focusCleanup: true
        });
        var isClick = true;
        function submitHandler() {
            if ($.validate.form() && isClick) {
                isClick = false;
                $.operate.save(prefix + "/add", $('#form-area-add').serialize());
                $.modal.close();
                closeItem();
            }
        }
    </script>

    <!--高德地图-->
    <script>
        //生成地图标记列表
        var markerList = [];
        var thisMarker = {};//当前标记点
        //默认为定位,所以覆盖物为0米
        var radius = 0;
        //监听输入框值改变事件
        var className = 'locationType'
        $('.' + className).on("ifChecked", function (event) {
            //当前input节点
            var that = $(event.target);
            //获得索引
            var index = that.attr('index');
            var val = that.val();//获得当前勾选的范围
            //判断定点
            if ("0" === val) {
                radius = 0;
            }
            //判断3公里
            else if ("1" === val) {
                radius = 3000;
            }
            //处理5公里
            else {
                radius = 5000;
            }
            addMarker(thisMarker.address, thisMarker.center);
        });

        //高德地图
        var map = new AMap.Map('container', {
            resizeEnable: true,
            // center: [116.481181, 39.989792],
            //  zoom: 11
        });
        //绑定单击事件
        map.on('click', function (e) {
            // 这里通过高德 SDK 完成。
            var geocoder ;
            AMap.plugin('AMap.Geocoder',function(){
                geocoder = new AMap.Geocoder()
            })
            geocoder.getAddress([e.lnglat.getLng(), e.lnglat.getLat()], function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    if (result && result.regeocode) {
                        addMarker( result.regeocode.formattedAddress, e.lnglat,
                            result.regeocode.addressComponent.province +"-"+ result.regeocode.addressComponent.city +"-"+ result.regeocode.addressComponent.district);
                    }
                }
            });
        });
        //增加比例
        AMap.plugin(['AMap.ToolBar', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Circle'], function () {//异步加载插件
            map.addControl(new AMap.ToolBar());
            //搜索提示
            var autoCompleteComponent = new AMap.Autocomplete({
                input: "tipinput"
            });
            // 注册监听Autocomplete选中项
            AMap.event.addListener(autoCompleteComponent, "select", function (data) {
                if (data.poi.location != undefined) {
                    //定位到中心点
                    addMarker( data.poi.district + data.poi.address + data.poi.name, data.poi.location);
                }
            })
        });
        //使用定位插件
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                buttonPosition: 'RB',    //定位按钮的停靠位置
                showMarker: false,
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: false,   //定位成功后是否自动调整地图视野到定位点
            });

            map.addControl(geolocation);
            //成功失败回调
            geolocation.getCurrentPosition(function (status, result) {
                console.log(result);
                if (status == 'complete') {

                    addMarker( result.formattedAddress, result.position,
                        result.addressComponent.province +"-"+ result.addressComponent.city +"-"+ result.addressComponent.district);
                    //position
                } else {
                    //  onError(result)
                }
            });
        });

        //添加marker标记
        function addMarker( address, position,pcaCodeDesc) {
            //清理map
            map.clearMap();
            var marker = new AMap.Marker({
                map: map,
                position: position
            });
            //鼠标点击marker弹出自定义的信息窗体
            AMap.event.addListener(marker, 'click', function () {
                infoWindow.open(map, marker.getPosition());
            });
            //实例化信息窗体
            var title = '地址信息';
            var content = [];
            content.push("地址：" + address);
            var infoWindow = new AMap.InfoWindow({
                isCustom: true,  //使用自定义窗体
                content: createInfoWindow(title, content.join("<br/>")),
                offset: new AMap.Pixel(16, -45)
            });
            infoWindow.open(map, position);
            //生成圆点
            var circleMarker = new AMap.Circle({
                center: position,
                radius: radius,//距离范围
                strokeColor: 'white',
                strokeWeight: 2,
                strokeOpacity: 0.5,
                fillColor: '#39b3d7',
                fillOpacity: 0.5,
                zIndex: 10,
                bubble: true,
                cursor: 'pointer',
                clickable: true
            })
            //保存当前标记点
            thisMarker = {
                title: title,//保存标题
                address: address,//保存地址
                center: position,//保存经纬度
                pcaCodeDesc:pcaCodeDesc, //保存地址信息
            }
            $("#pcaCodeDesc").val(pcaCodeDesc);
            $("#address").val(address);
            $("#latitude").val(position.lat); //纬度
            $("#longtitude").val(position.lng);
            map.setCenter(position);
            circleMarker.setMap(map)
        }


        //构建自定义信息窗体
        function createInfoWindow(title, content) {
            var info = document.createElement("div");
            info.className = "custom-info input-card content-window-card";
            //可以通过下面的方式修改自定义窗体的宽高
            //info.style.width = "400px";
            // 定义顶部标题
            var top = document.createElement("div");
            var titleD = document.createElement("div");
            var closeX = document.createElement("img");
            top.className = "info-top";
            titleD.innerHTML = title;
            closeX.src = "https://webapi.amap.com/images/close2.gif";
            closeX.onclick = closeInfoWindow;

            top.appendChild(titleD);
            top.appendChild(closeX);
            info.appendChild(top);

            // 定义中部内容
            var middle = document.createElement("div");
            middle.className = "info-middle";
            middle.style.backgroundColor = 'white';
            middle.innerHTML = content;
            info.appendChild(middle);

            // 定义底部内容
            var bottom = document.createElement("div");
            bottom.className = "info-bottom";
            bottom.style.position = 'relative';
            bottom.style.top = '0px';
            bottom.style.margin = '0 auto';
            var sharp = document.createElement("img");
            sharp.src = "https://webapi.amap.com/images/sharp.png";
            bottom.appendChild(sharp);
            info.appendChild(bottom);
            return info;
        }

        //关闭信息窗体
        function closeInfoWindow() {
            map.clearInfoWindow();
        }


        //立即添加标记点
        function addMapData() {
            for(var i=0;i<markerList.length;i++){
                var item = markerList[i];
                //判断经纬度是否存在
                if(JSON.stringify(item.center)===JSON.stringify(thisMarker.center)){
                    $.modal.msgWarning("您已经选择过了该地址！",3000);
                    return;
                }
            }
            markerList.push(thisMarker);
            refresh();
            //重新绘制右侧地图点
        }
        //刷新列表
        function refresh() {
            var html="";
            markerList.forEach(function (value,key) {
                html+=" <div class=\"custom-info input-card content-window-card\" onclick=\"selectMapData("+key+")\">\n" +
                    "                            <div class=\"info-top\">\n" +
                    "                                <div>"+value.title+"</div>\n" +
                    "                                <img src=\"https://webapi.amap.com/images/close2.gif\" onclick=\"removeMapData("+key+")\"></div>\n" +
                    "                            <div class=\"info-middle\" style=\"background-color: white;\">地址："+value.address+"<br>\n" +
                    "                            </div>\n" +
                    "                            <div class=\"info-bottom\" style=\"position: relative; top: 0px; margin: 0px auto;\">\n" +
                    "                                <!-- <img  src=\"https://webapi.amap.com/images/sharp.png\"></div>-->\n" +
                    "                            </div>\n" +
                    "                        </div>"
            })
            $("#amap-list").html(html);
            //将数据值绑定到内容中
            $("#addressList").val(JSON.stringify(markerList));
        }
        //删除标记点
        function removeMapData(index) {
            //重新绘制右侧地图点
            //取消冒泡时间
            markerList.splice(index, 1);
            refresh();
            window.event.cancelBubble =true;
        }
        //选中标记点
        function selectMapData(index){
            //获得当前选中的数据
            var mapData = markerList[index];
            addMarker(mapData.address,mapData.center);
        }

        function onFile(fileType) {
            $('#upload').click();
            $('#fileType').val(fileType);
        }
        $('#upload').on('change', function(){
            var farmdate = new FormData();
            farmdate.append("file",$('#upload')[0].files[0]);
            $.ajax({
                type:"post",
                url:"/common/importFile",
                data:farmdate,
                contentType:false,
                processData:false,
                success:function (date) {
                    var logo = $('#logo').val();
                    var fileType = $('#fileType').val();
                    if (fileType==1){
                        if (logo==""){
                            $('#logo').val(date);
                        }else {
                            $('#logo').val(logo+","+date);
                        }
                    }
                    if (fileType==2){
                        $('#areaCover').val(date);
                    }
                }
            })
        });
    </script>
    <style>
        .amap-info-list{
            height:600px;
            overflow-y: auto;
        }
        .amap-info-list>.custom-info{
            margin-bottom:20px;
        }
        .amap-info-list>.custom-info:last-child {
            margin-bottom:0;
        }
        .title1 {
            height: 40px;
            line-height: 40px;
        }
    </style>
    <!--高德地图样式-->
    <style>

        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>

</body>
</html>